import React from "react";
import "../css/TodoBoard.css";
import {TODOKEY,DELETED,FINISHED,PENDDING} from "./config"

class TodoBoard extends React.Component{
    constructor(props){
        super(props);

        // 定义状态
        this.state = {
            todoList:JSON.parse(localStorage.getItem(TODOKEY))||[],
            filterTodos:[]
        }
        console.log(this.state)
    };

    //创建阶段
    //组件将要挂载
    componentWillMount(){
        //更新组件本身的初始化状态
        // 组件挂载前，筛选数据
        var tempArray = [];
        this.state.todoList.forEach(element => {
        if(element.status!==DELETED){
            tempArray.push(element);
        }
        });
        this.setState({
        filterTodos:tempArray
        })
    }

    //本地存储
     save() {
        localStorage.setItem(TODOKEY,JSON.stringify(this.state.todoList));

        this.setState({
            todoList:this.state.todoList
        });
        
    } 


    render(){
        console.log(this.state.filterTodos)
        return(
            <div className="board_container">
                <div className="board_wrapper">
                    {
                        this.state.filterTodos.map((el,index)=>{
                        return <div className="board_item" key={index}>
                                  <input className="board_item_ck"
                                   type="checkbox"
                                   checked={el.status===FINISHED}
                                   onChange={(e)=>{
                                      if(e.target.checked){
                                          el.status = FINISHED
                                      }else {
                                          el.status = PENDDING
                                      }
                                      this.save()
                                   }}/>
                                  <div className="board_item_content">{el.content}</div>
                                  <button className="board_item_del"
                                        onClick={()=>{
                                            el.status = DELETED;
                                            // 获取index 使用findIndex
                                            var index = this.state.filterTodos.findIndex(ele=>{
                                                return ele.content === el.content//必须是严格的等于
                                            })
                                            if(index !== -1){
                                                this.state.filterTodos.splice(index,1)
                                            }
                                            this.save()
                                        }}>删除</button>                                   
                               </div>
                        })
                    }
                </div>
                <div className="board_tool">
                    <div className="board_tool_item"
                    onClick={()=>{
                        var temp = [];
                        this.state.todoList.forEach(el=>{
                            if(el.status!==DELETED){
                                temp.push(el)
                            }
                            // 修改状态
                            this.setState({
                                filterTodos:temp
                            })
                        })
                    }}>全部任务</div>
                    <div className="board_tool_item"
                    onClick={()=>{
                        this.state.filterTodos = []
                        this.state.todoList.forEach((el)=>{
                            if(el.status === PENDDING){
                                this.state.filterTodos.push(el)
                            }
                            // 修改状态
                            this.setState({
                                filterTodos:this.state.filterTodos
                            })
                        })
                    }}>正在进行</div>
                    <div className="board_tool_item"
                    onClick={()=>{
                        this.state.filterTodos = []
                        this.state.todoList.forEach((el)=>{
                            if(el.status === FINISHED){
                                this.state.filterTodos.push(el)
                            }
                            // 修改状态
                            this.setState({
                                filterTodos:this.state.filterTodos
                            })
                        })
                    }}>已完成</div>
                    <div className="board_tool_item"
                    onClick={()=>{
                        this.state.filterTodos = []
                        this.state.todoList.forEach((el)=>{
                            if(el.status === DELETED){
                                this.state.filterTodos.push(el)
                            }
                            // 修改状态
                            this.setState({
                                filterTodos:this.state.filterTodos
                            })
                        })
                    }}>回收站</div>
                </div>
            </div>
        )
    };

  //更新阶段
  componentWillReceiveProps(props){
    console.log(props);
    this.props = props;

    //去重 
    var index = this.state.todoList.findIndex((element)=>{
      return element.content === this.props.todo.content;
    })

    if(index !== -1){
      alert('不能添加重复的todo');
      return;
    }
    
    this.state.todoList.push(this.props.todo);

    this.save()

  }
  //是否允许组件更新
  shouldComponentUpdate(){
    return true;
  }
};

export default TodoBoard;